<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta content="telephone=no" name="format-detection" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<!--360自动切换极速-->
	<meta name="apple-mobile-web-app-title" content="DAN潜水" />
	<meta name="format-detection" content="telephone=no" />
	<link rel="shortcut icon" href="${ctxPath}/image/favicon.ico"/>
	<!--阻止iphone识别为电话-->
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/global.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/css/index.css" />
	<link rel="stylesheet" type="text/css" href="${ctxPath}/libs/datepicker/css/bootstrap-datepicker3.min.css" />
	
	<style>
		html,body{
			height: 100%;
		}
		.login-bg{
			width: 100%;
			height: 100%;
			background-repeat: no-repeat;
			background:url('${ctxPath}/image/banner.png');
			background-size: cover;
		}
		.modal.show .modal-dialog{
			padding-top: 60px;
			width: 384px;
		}
		.dan-modal .modal-footer{
			margin-top: 40px;
		}
	</style>
	<title>DAN潜水</title>
</head>

<body>
	<div class="login-bg"></div>
	<!-- Modal/login-->
	<div class="modal fade dan-modal" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">账号密码登录</h4>
					<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button> -->
					<button type="button" class="close" data-toggle="modal" data-target="#register" data-dismiss="modal"><span aria-hidden="true">×</span></button>
				</div>
				<div class="modal-body">
					<form id="loginForm" class="form">
						<div class="form-group row">
							<div class="col-3">
								<select id="loginCountryCodeSelect" class="form-control" name="countryCode">
									@for(countryCode in countryCodeList!){
									<option>${countryCode.code!}</option>
									@}
								</select>
							</div>
							<div class="col-9">
								<input id="loginPhoneInput" type="text" class="form-control" placeholder="请输入手机号码" name="phone" value="">
							</div>
						</div>
						<div class="form-group row">
							<label class="col-3 control-label">密码</label>
							<div class="col-9">
								<input id="loginPasswordInput" type="password" class="form-control" placeholder="请输入密码" name="password" value="">
							</div>
						</div>
						<div class="forget-password" data-toggle="modal" data-dismiss="modal" data-target="#forgetPassword" style="cursor:pointer">忘记密码
						</div>
						<button type="button" class="btn btn-danger dan-btn-full" onclick="login()" style="cursor:pointer">登录</button>
					</form>
				</div>
				<div class="modal-footer">
					<div class="go-register" data-toggle="modal" data-target="#register" data-dismiss="modal" style="cursor:pointer">手机号注册></div>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal/register-->
	<div class="modal fade dan-modal" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">注册账号</h4>
					<!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
							aria-hidden="true">&times;</span></button> -->
					<button type="button" class="close" onclick="javascript:history.go(-1);"><span
							aria-hidden="true">&times;</span></button>

				</div>
				<div class="modal-body">
					<form id="registerForm" class="form">
						<div class="form-group row">
							<div class="col-3">
								<select id="registerCountryCodeSelect" class="form-control" name="countryCode">
									@for(countryCode in countryCodeList!){
									<option>${countryCode.code!}</option>
									@}
								</select>
							</div>
							<div class="col-9">
								<input id="registerPhoneInput" type="text" class="form-control" placeholder="请输入手机号码" name="phone" value="">
							</div>
						</div>
						<div class="row">
							<div class="col-8">
								<div class="form-group">
									<input id="registerCaptchaCodeInput" type="text" class="form-control" placeholder="请输入验证码" name="captchaCode" value="">
								</div>
							</div>
							<div class="col-4 sms-code">
								<div class="form-group code-btn">
									<span onclick="sendSmsCode_register()" style="cursor:pointer" id="sms-btn-register">获取验证码</span>
								</div>
							</div>
						</div>
						<div class="form-group row">
							<input id="registerPasswordInput" type="password" class="form-control" placeholder="请输入8－16字符，必须包含数字和字母" name="password" value="">
						</div>
						<div class="form-group">
							<input id="registerBirthdayInput" name="birthday" type="text" class="form-control datepicker"
								   data-date-format="yyyy-mm-dd"
								   placeholder="请选择您的生日"
								   name="" value="" id="date_birth">
						</div>
						<div class="form-group">
							<select id="registerSexSelect" name="sex" class="form-control" >
								<option value='' disabled selected>请选择您的性别</option>
								<option value="0">男</option>
								<option value="1">女</option>
							</select>
						</div>
						<div style="font-size:12px;color:#d0001a">提醒：以上信息会影响您的唯一会员卡，请如实填写！</div>
						<button type="button" class="btn btn-danger dan-btn-full" onclick="register()" style="margin-bottom: -50px;cursor:pointer">注册账号</button>
					</form>
				</div>
				<div class="modal-footer">
					<div class="go-register" data-toggle="modal" data-target="#login" data-dismiss="modal" style="cursor:pointer">
						<span class="has-account">已有账号？</span>
						去登录>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal/password-->
	<div class="modal fade dan-modal" id="forgetPassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					<button type="button" class="close" onclick="javascript:history.go(-1);"><span
							aria-hidden="true">&times;</span></button>
				</div>
				<div class="modal-body">
					<form id="forgetPasswordForm" action="" class="form">
						<div class="form-group row">
							<div class="col-3">
								<select id="forgetPasswrodCountryCodeSelect" class="form-control" name="countryCode">
									@for(countryCode in countryCodeList!){
									<option>${countryCode.code!}</option>
									@}
								</select>
							</div>
							<div class="col-9">
								<input id="forgetPasswordPhoneInput" type="text" class="form-control" placeholder="请输入手机号码" name="phone" value="">
							</div>
						</div>
						<div class="row">
							<div class="col-8">
								<div class="form-group">
									<input id="forgetPasswordCaptchaCodeInput" type="text" class="form-control" placeholder="请输入验证码" name="captchaCode" value="">
								</div>
							</div>
							<div class="col-4 sms-code">
								<div class="form-group code-btn">
									<span onclick="sendSmsCode_forgetPwd()" style="cursor:pointer" id="sms-btn-forgetPwd">获取验证码</span>
								</div>
							</div>
						</div>
						<div class="form-group row">
							<input id="forgetPasswordPasswordInput" type="password" class="form-control" placeholder="请输入新密码" name="password" value="">
						</div>
						<div class="form-group row">
							<input id="forgetPasswordPasswordConfirmInput" type="password" class="form-control" placeholder="请再次输入新密码" name="passwordConfirm" value="">
						</div>
						<button type="button" class="btn btn-danger dan-btn-full" onclick="forgetPassord()" style="cursor:pointer">提交</button>
					</form>
				</div>
				<div class="modal-footer">
					<div class="go-register" data-toggle="modal" data-target="#login" data-dismiss="modal" style="cursor:pointer">
						<span class="has-account">想起密码？</span>
						去登录>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="${ctxPath}/js/jquery.min.js"></script>
	<script src="${ctxPath}/js/bootstrap.bundle.min.js"></script>
	<script src="${ctxPath}/libs/datepicker/js/bootstrap-datepicker.min.js"></script>
	<script src="${ctxPath}/libs/datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
	<script>
		$(document).ready(function(){

			@if(showModel == 'login'){
				$('#login').modal('show')
			@}else{
				$('#register').modal('show')
			@}

		});

		var sms_register={
			setting:60,
			text: '发送验证码',
			seconds: 60,
			countryCode:null,
			phone:null,
		}
		var sms_forgetPwd={
			setting:60,
			text: '发送验证码',
			seconds: 60,
			countryCode:null,
			phone:null,
		}
		var interval_register
		var interval_forgetPwd

		var sendSmsCode_register=function(){
			var ele=$('#sms-btn-register')
			var countryCode = $('#registerCountryCodeSelect').val();
			var phone=$('#registerPhoneInput').val()
			if(sms_register.seconds!=sms_register.setting||sms_register.phone==phone){
				return
			}
			if(!phone||phone==''){
				alert('请输入正确手机号码！')
				return
			}else if('+86'==countryCode && phone.length!=11){
				alert('请输入正确手机号码！')
				return
			}
			sms_register.phone=phone
			interval_register=setInterval(function(){
				sms_register.seconds--
				if (sms_register.seconds === 0) {
					sms_register.text = '发送验证码'
					sms_register.seconds = sms_register.setting
					clearInterval(interval_register)
					sms_register.phone=null
					ele.css('color','#d0001a')
				} else {
					sms_register.text = sms_register.seconds + 's重新获取'
					ele.css('color','#999')
				}
				ele.text(sms_register.text)
			},1000)
			//请求发送验证码
			sendCaptchaCode(true);
		}

		var sendSmsCode_forgetPwd=function(){
			var ele=$('#sms-btn-forgetPwd')
			var countryCode = $('#forgetPasswrodCountryCodeSelect').val();
			var phone=$('#forgetPasswordPhoneInput').val()
			if(sms_forgetPwd.seconds!=sms_forgetPwd.setting||sms_forgetPwd.phone==phone){
				return
			}
			if(!phone||phone==''){
				alert('请输入正确手机号码！')
				return
			}else if('+86'==countryCode && phone.length!=11){
				alert('请输入正确手机号码！')
				return
			}
			sms_forgetPwd.phone=phone
			interval_forgetPwd=setInterval(function(){
				sms_forgetPwd.seconds--
				if (sms_forgetPwd.seconds === 0) {
					sms_forgetPwd.text = '发送验证码'
					sms_forgetPwd.seconds = sms_forgetPwd.setting
					clearInterval(interval_forgetPwd)
					sms_forgetPwd.phone=null
					ele.css('color','#d0001a')
				} else {
					sms_forgetPwd.text = sms_forgetPwd.seconds+'s重新获取'
					ele.css('color','#999')
				}
				ele.text(sms_forgetPwd.text)
			},1000)
			//请求发送验证码
			sendCaptchaCode(false);
		}

		function forgetPassord(){
			var forgetPasswordCountryCode = $("#forgetPasswrodCountryCodeSelect").val();
			var forgetPasswordPhone = $("#forgetPasswordPhoneInput").val();
			var forgetPasswordCaptchaCode = $("#forgetPasswordCaptchaCodeInput").val();
			var forgetPasswordPassword = $("#forgetPasswordPasswordInput").val();
			var forgetPasswordPasswordConfirm = $("#forgetPasswordPasswordConfirmInput").val();
			if(forgetPasswordCountryCode == ''){
				alert("请选择国家区号");
				return false;
			}
			if(forgetPasswordPhone == ''){
				alert("请输入手机号码");
				return false;
			}
			if(!checkPhone(forgetPasswordCountryCode, forgetPasswordPhone)){
				alert("请输入正确的手机号码");
				return false;
			}
			if(forgetPasswordCaptchaCode == ''){
				alert("请输入验证码");
				return false;
			}
			if(forgetPasswordPassword == ''){
				alert("请输入密码");
				return false;
			}
			if(forgetPasswordPasswordConfirm == ''){
				alert("请再次输入密码");
				return false;
			}
			if(!checkPwd(forgetPasswordPassword)){
				alert("密码中必须包含数字和字母，至少8个字符，最多16个字符");
				return false;
			}
			if(forgetPasswordPasswordConfirm!=forgetPasswordPassword){
				alert("两次输入的密码不一致");
				return false;
			}

			$.ajax({
				type: "post",
				dataType: "json",
				url: '${ctxPath}/forgetPassword',
				data: $('#forgetPasswordForm').serialize(),
				success: function(result){
					if(result.code == 500){
						alert("网络异常，请稍后再试！");
					}else if(result.code != 200){
						alert(result.msg);
					}else{
						alert("密码设置成功，请登录");
						$('#forgetPassword').modal('hide');
						$('#login').modal('show');
					}
				},
				error: function(){
					alert("网络异常，请稍后再试！");
				}
			});
		}

		function sendCaptchaCode(registerFlag){
			var countryCode;
			var phone;
			if(registerFlag){
				phone = $("#registerPhoneInput").val();
				countryCode = $('#registerCountryCodeSelect').val();
			}else{
				phone = $("#forgetPasswordPhoneInput").val();
				countryCode = $('#forgetPasswrodCountryCodeSelect').val();
			}
			if(countryCode == ''){
				alert("请选择国家区号");
				return false;
			}
			if(phone == ''){
				alert("请输入手机号码");
				return false;
			}
			if(!checkPhone(countryCode, phone)){
				alert("请输入正确的手机号码");
				return false;
			}

			$.ajax({
				type: "post",
				dataType: "json",
				url: '${ctxPath}/catpchaCode',
				data: {
					countryCode: countryCode,
					phone: phone,
					type: registerFlag ? "register" : "changePwd"
				},
				success: function(result){
					if(result.code == 500){
						alert("网络异常，请稍后再试！");
					}else if(result.code != 200){
						alert(result.msg);
					}else{
						alert("验证码发送成功");
					}
				},
				error: function(){
					alert("网络异常，请稍后再试！");
				}
			});
		}

		function login(){
			var loginCountryCode = $('#loginCountryCodeSelect').val();
			var loginPhone = $("#loginPhoneInput").val();
			var loginPassword = $("#loginPasswordInput").val();
			if(loginCountryCode == ''){
				alert("请选择国家区号");
				return false;
			}
			if(loginPhone == ''){
				alert("请输入手机号码");
				return false;
			}
			if(!checkPhone(loginCountryCode, loginPhone)){
				alert("请输入正确的手机号码");
				return false;
			}
			if(loginPassword == ''){
				alert("请输入密码");
				return false;
			}

			$.ajax({
				type: "post",
				dataType: "json",
				url: '${ctxPath}/login',
				data: $('#loginForm').serialize(),
				success: function(result){
					if(result.code == 500){
						alert("网络异常，请稍后再试！");
					}else if(result.code != 200){
						alert(result.msg);
					}else{
						window.location.href="${ctxPath}/";
					}
				},
				error: function(){
					alert("网络异常，请稍后再试！");
				}
			});
		}

		function register(){
			var registerCountryCode = $('#registerCountryCodeSelect').val();
			var registerPhone = $("#registerPhoneInput").val();
			var registerCaptchaCode = $("#registerCaptchaCodeInput").val();
			var registerPassword = $("#registerPasswordInput").val();
			var registerBirthday = $("#registerBirthdayInput").val();
			var registerSex = $("#registerSexSelect").val();
			if(registerCountryCode == ''){
				alert("请选择国家区号");
				return false;
			}
			if(registerPhone == ''){
				alert("请输入手机号码");
				return false;
			}
			if(!checkPhone(registerCountryCode, registerPhone)){
				alert("请输入正确的手机号码");
				return false;
			}
			if(registerCaptchaCode == ''){
				alert("请输入验证码");
				return false;
			}
			if(registerPassword == ''){
				alert("请输入密码");
				return false;
			}
			if(!checkPwd(registerPassword)){
				alert("密码中必须包含数字和字母，至少8个字符，最多16个字符");
				return false;
			}
			if(registerBirthday == ''){
				alert("请选择您的生日");
				return false;
			}
			if(registerSex == null || registerSex == ''){
				alert("请选择您的性别");
				return false;
			}

			$.ajax({
				type: "post",
				dataType: "json",
				url: '${ctxPath}/register',
				data: $('#registerForm').serialize(),
				success: function(result){
					if(result.code == 500){
						alert("网络异常，请稍后再试！");
					}else if(result.code != 200){
						alert(result.msg);
					}else{
						alert("注册成功，请登录");
						$('#register').modal('hide');
						$('#login').modal('show');
					}
				},
				error: function(){
					alert("网络异常，请稍后再试！");
				}
			});
		}

		function checkPhone(countryCode, phone){
			if('+86' == countryCode){
				return /^1[3456789]\d{9}$/.test(phone);
			}
			return true;
		}

		function checkPwd(password){
			var pwdRegex = new RegExp('^(?=.*[0-9])(?=.*[a-zA-Z]).{8,16}$');
			return pwdRegex.test(password);
		}

		function DatePicker(selector){
			// 仅选择日期
			$(selector).datepicker(
					{
						language:  "zh-CN",
						autoclose: true,
						startView: 0,
						format: "yyyy-mm-dd",
						clearBtn:true,
						todayBtn:false,
						endDate:new Date()
					}).on('changeDate', function(ev){

			})
		}

		DatePicker("#registerBirthdayInput");
	</script>
</body>

</html>